import { Component } from 'react';

import { Boxs } from 'saltui';
import './check.less';
const { HBox, Box,VBox } = Boxs;

export default class Page extends Component {
  constructor(props) {
    super(props);
    this.state = {
        readOnly: props.readOnly,
        checkResult : []
    }
  }

  componentDidMount() {
    let t = this;
    let data = t.props.data;
    let type = t.props.type;
    data.list.map(function(item,index){
      if (item.checked) {
        if (type == 'radio') {
          $("#"+item.value).click();
        } else if (type == 'check') {
          $("#"+item.value).click();
          $("#"+item.value).click();
        }
      }
    });
  }
 
  handleShow(i){
    let readOnlyVal = this.props.readOnly;
    let type = this.props.type;
    let fraction = 0;
    if(!readOnlyVal){
      let list= this.props.data.list;
      let checkResult = this.state.checkResult;
      let flag = true;
      for (let j = 0; j < list.length; j++) {
        let obj = list[j];
        if(type == 'radio'){
          if (i == j) {
            obj.checked = true;
            if(obj.isRightAnswer) fraction = this.props.data.topicScore;
          }
          else obj.checked = false;
        }else if(type == 'check'){
          if (i == j && !obj.checked) {//勾选
            obj.checked = true;
            checkResult.push(obj);
          }else if(i == j && obj.checked) {//去掉勾选
            obj.checked = false;
            for(let k = 0; k < checkResult.length; k++){
              if(obj.value == checkResult[k].value){
                checkResult.splice(k,1);
                break;
              }
            }
          }
        }
      };
      //多选题评分
      if(type == 'check' && this.props.quesType == 'questionnaireExam' && flag){
        for (let j = 0; j < list.length; j++) {
          let obj = list[j];
          if((obj.checked && !obj.isRightAnswer) || (!obj.checked &&obj.isRightAnswer)){
            flag = false;
            break;
          }
        }
        if(flag) fraction = this.props.data.topicScore;
      }
      this.setState({
        list:list,
      });
      if(type == 'radio') this.props.onChange(list[i].value, fraction);
      else if(type == 'check') this.props.onChange(checkResult, fraction);
    }
  }

  onInputChange(index,value){
    this.props.onInputChange(index,value);
  }

  render() {
    let t = this;
    let data = t.props.data;
    let type = t.props.type;
    return (
    <div>
      {
        data.list.map( function(item,index){
          return(
            <HBox vAlign="top" className="t-FS14 t-FC3 t-PB12">
              <Box id={item.value} onClick={t.handleShow.bind(this,index)}>
                  {type == 'radio'?
                    <div className={item.checked?'t-checkbox-field-icon-list t-list-cricle checked t-MT2':'t-checkbox-field-icon-list t-list-cricle un-checked t-MT2'}  >
                      <i className="iconfont icon-checked t-FCf t-FS14"></i>
                    </div>
                    :
                    <div className={item.checked?'t-checkbox-field-icon-list checked t-R4 t-MT2':'t-checkbox-field-icon-list un-checked t-R4 t-MT2'}  >
                      <i className="iconfont icon-checked t-FCf t-FS14"></i>
                    </div>
                  }
              </Box>
              <Box className="t-PL10">
                <Box className="t-FS16 t-WB">
                  <span className={data.ezQuABC=="1"?"":"t-DN"}>{item.letter}. </span>
                  <span>{item.radioName} </span>
                  {t.props.quesType != 'questionnaireExam' && item.checked && item.optionBlank =='1' ? 
                    <div className="dd-bottom-border dd-bottom-darkBorder t-DIB" >
                      <input maxLength='30' onChange={t.onInputChange.bind(t,index)} style={{ width: "auto", textAlign: "left"}} disabled={t.props.readOnly} value ={item.answerExt} className="t-text-field-input" type="text" />
                    </div>
                    :
                    ''
                  }
                </Box>
                {item.url == null || item.url == '' ? '':
                  <img style={{height:"100",marginTop: "12px"}} src={item.url} />
                }
                {t.props.quesType == 'questionnaireVote' ? 
                  <HBox className="t-PT8">
                    <Box className="t-FCorange t-MR4">{item.selectNum}票</Box>
                    <Box className="t-FCddfontblue-60">({item.ticketPercent == null ? '0%' : item.ticketPercent})</Box>
                  </HBox>
                  :''
                }
              </Box>          
            </HBox>
            )
          }.bind(t)
        )
      }
    </div>
    );
  }
}



